<template>
  <div class="home">
    <nav-bar/>
    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="" >
    </div>
    <search-box/>
    <categories/>

    <div class="search-bar" v-if="isShowSearchBar">
      <search-bar :start-date="'01.01'" :end-date="'01.02'"/>
    </div>
    <content/>
  </div>
</template>
<script setup>
import { computed, onActivated, onMounted,onUnmounted, ref, watch } from 'vue'
import SearchBar from '@/components/search-bar/search-bar.vue'
import navBar from './cpns/nav-bar.vue'
import searchBox from './cpns/search-box.vue'
import categories from './cpns/categories.vue'
import myRequest from '@/service/request/index'
import useHomeStore from '@/store/modules/home'
import content from './cpns/content.vue'

import useScroll from '@/hooks/useScroll.js'

const homeStore = useHomeStore()
homeStore.fetchHotSuggestData()
homeStore.fetchCategoriesData()

homeStore.fetchHouselistData()

// const scrollListenerHandler = () => {
//   const clientHeight = document.documentElement.clientHeight
//   const scrollHeight = document.documentElement.scrollHeight
//   const scrollTop = document.documentElement.scrollTop
//   console.log('----------')
//   if(clientHeight + scrollTop >= scrollHeight){
//     homeStore.fetchHouselistData()
//   }
// }

// onMounted(()=> {
//   window.addEventListener("scroll", scrollListenerHandler)
// })
// onUnmounted(()=>{
//   window.removeEventListener("scroll", scrollListenerHandler)
// })


const { isReachBottom, scrollTop } = useScroll()
console.log(isReachBottom.value)
watch(isReachBottom, (newValue)=> {
  console.log(newValue);
  if(newValue) {
    homeStore.fetchHouselistData().then(() => {
      isReachBottom.value = false
      console.log("请求完成");
    })
  }
})

// 搜索框显示的控制
// const isShowSearchBar = ref(false)
// watch(scrollTop, (newTop)=> {
//   isShowSearchBar.value = newTop > 100
// })
const isShowSearchBar = computed(()=> {
  return scrollTop.value > 200
})


</script>

<style lang="less" scoped>
  .home {
    margin-bottom: 60px;
    .banner {
      img{
        width: 100%;
      }
    }
    .location {
      display: flex;
      align-items: center;
      height: 44px;
      padding: 0 20px;
      .city {
        flex: 1;
      }
      .position {
        display: flex;
        align-items: center;
        width: 74px;
        .text {
          font-size: 12px;
        }
        img {
          margin-left: 5px;
          width: 18px;
          height: 18px;
        }
      }
    }
  }
  .search-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    height: 45px;
    padding: 16px 16px 10px;
    background-color: #fff;

  }
</style>
